<template>
  <n-h1>DPS计算器</n-h1>
  <n-grid :cols="4">
    <n-gi>
      <char-attr-select v-model:attr="charAttr" />
    </n-gi>
    <n-gi>
      <enemy-select v-model:attr="enemyAttr" />
    </n-gi>
    <n-gi>
      <raid-buff-select v-model:attr="raidBuff" />
    </n-gi>
    <n-gi>
      <n-space vertical>
        <dps-calc v-model:dps="dps" :character="charAttr" :enemy="enemyAttr" :raidBuff="raidBuff" />
        <dps-result debug :dps="dps" />
      </n-space>
    </n-gi>
  </n-grid>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// import { user } from '../services'
import { api } from '../utils'
import { NSpace, NGrid, NGi } from 'naive-ui'
import { CharSelectPopup, CharIcon, CharAttrSelect,
         EnemySelect, RaidBuffSelect, DpsCalc, DpsResult } from '../components' 


const charAttr = ref({})
const enemyAttr = ref({})
const raidBuff = ref({})
const dps = ref({})

</script>

<style scoped>

</style>